<template>
  <div class="day-box">
    <div class="day-content">
      <div class="title">24小时报警趋势图</div>
      <div id="main-day"></div>
      <div class="mark"><i></i><span></span></div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'dayWarning',
  data () {
    return {
      warnDate: [], // 24小时报警趋势数据
      chart: ''
    }
  },
  props: {
    areaId: {
      type: Number,
      default: null
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    option: {
      type: Object,
      default () {
        return {
          grid: {
            x: '3%',
            y: '50%',
            x2: '3%',
            y2: '30%',
            borderWidth: 1
          },
          toolbox: {
            title: '18%'
          },
          xAxis: {
            type: 'category',
            // show:false,
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#AEAEAE',
                fontSize: 12
                // backgroundColor: 'rgba(43, 54, 72, 0.5)',
              },
              padding: [3, 5]
            },
            axisArea: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 0
              }
            },
            nameTextStyle: {
              textBorderColor: '#fff'
            },
            data: []
          },
          yAxis: {
            type: 'value',
            show: false
          },
          series: [{
            data: [],
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: '#FD8863',
                width: 2,
                type: 'solid'
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: '#313131',
                color: '#F6511D'
              }
            }
          }]
        }
      }
    }
  },
  watch: {
    areaId (val) {
      this.init(val)
    }
  },
  mounted () {
    this.init(this.areaId)
  },
  methods: {
    init (areaId) {
      if (!areaId) {
        return
      }

      let url = this.$base.getUrl('summaryDayEvent')
      let params = {
        url: url,
        data: {
          'areaId': areaId
        }
      }
      this.$store.dispatch('postForm', params).then(res => {
        if (res.code === 0) {
          // console.log(res.result)
          this.echartFun(res.result)
        }
      })
    },
    echartFun (result) {
      let datas = []
      if (result.length) {
        let len = result.length
        let maxHour = result[len - 1].hour
        let hourMap = new Map()
        for (let j = 0; j < len; j++) {
          hourMap.set(result[j].hour, result[j].count)
        }

        for (let i = maxHour - 24; i < maxHour; i++) {
          let hour = (i < 0) ? i + 24 + 1 : i + 1
          if (hourMap.has(hour)) {
            datas.push(hourMap.get(hour))
          } else {
            datas.push(0)
          }
        }
      } else {
        for (let i = 0; i < 24; i++) {
          datas.push(0)
        }
      }

      let temp = this.option
      temp.series[0].data = datas
      this.chart = this.$echarts.init(document.getElementById('main-day'))
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style scoped>
  .day-box {
    width: 100%;
    margin-bottom: 10px;
  }

  .day-content {
    position: relative;
    width: 100%;
    background: rgba(43, 54, 72, 0.95);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 13px;
    box-sizing: border-box;
  }

  #main-day {
    width: 100%;
    height: 110px;
  }

  .title{
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top:18px;
    left: 18px;
    z-index: 999;
  }

  .mark {
    position: absolute;
    top: 15px;
    right: 17%;
    z-index: 9;
  }

  .mark i {
    color: #6FA332;
    font-style: normal;
    font-size: 12px;
  }
</style>
